console.clear();

const colorArr = [
  {
    colorPrimary: "23, 25, 26, 1",
    colorSecondary: "80, 80, 80, 1",
    colorBorder: "23, 25, 26, 0.2",
    color1: "255.0,150.0,85.0",
    color2: "185.0,60.0,100.0",
    colorBg: "223.0, 151.0, 173.0",
    colorHover: "185.0,60.0,100.0",
    colorPrimaryOld: "117, 43, 73, 1",
    colorSecondaryOld: "54, 20, 30, 1",
    colorBorderOld: "117, 43, 73, 0.2",
  },
  {
    colorPrimary: "23, 25, 26, 1",
    colorSecondary: "80, 80, 80, 1",
    colorBorder: "23, 25, 26, 0.2",
    color1: "236.0,183.0,150.0",
    color2: "0.0,50.0,71.0",
    colorBg: "244.0,215.0,197.0",
    colorHover: "0.0,50.0,71.0",
  },
  {
    colorPrimary: "23, 25, 26, 1",
    colorSecondary: "80, 80, 80, 1",
    colorBorder: "23, 25, 26, 0.2",
    color1: "208.0,180.0,72.0",
    color2: "195.0,129.0,113.0",
    colorBg: "237.0, 218.0, 213.0",
    colorHover: "195.0,129.0,113.0",
  },
  {
    colorPrimary: "23, 25, 26, 1",
    colorSecondary: "80, 80, 80, 1",
    colorBorder: "23, 25, 26, 0.2",
    color1: "130.0,210.0,160.0",
    color2: "24.0,24.0,67.0",
    colorBg: "112.0, 117.0, 143.0",
    colorHover: "24.0,24.0,67.0",
  },
];
const shaders = {
  fragment: `precision highp float;
varying vec2 vUv;
uniform float u_ratio;
uniform float u_time;
uniform vec2 u_point;
uniform vec3 u_color1;
uniform vec3 u_color2;
uniform vec2 u_resolution;
uniform float u_mouseInteraction;

vec4 permute(vec4 x){
	return mod(((x*34.)+1.)*x,289.);
}
vec4 taylorInvSqrt(vec4 r){
	return 1.79284291400159-.85373472095314*r;
}

float snoise(vec3 v){
	const vec2 C=vec2(1./6.,1./3.);
	const vec4 D=vec4(0.,.5,1.,2.);
	
	
	vec3 i=floor(v+dot(v,C.yyy));
	vec3 x0=v-i+dot(i,C.xxx);
	
	
	vec3 g=step(x0.yzx,x0.xyz);
	vec3 l=1.-g;
	vec3 i1=min(g.xyz,l.zxy);
	vec3 i2=max(g.xyz,l.zxy);
	
	
	vec3 x1=x0-i1+1.*C.xxx;
	vec3 x2=x0-i2+2.*C.xxx;
	vec3 x3=x0-1.+3.*C.xxx;
	
	
	i=mod(i,289.);
	vec4 p=permute(permute(permute(i.z+vec4(0.,i1.z,i2.z,1.))+i.y+vec4(0.,i1.y,i2.y,1.))+i.x+vec4(0.,i1.x,i2.x,1.));
	
	
	
	float n_=1./7.;
	vec3 ns=n_*D.wyz-D.xzx;
	
	vec4 j=p-49.*floor(p*ns.z*ns.z);
	
	vec4 x_=floor(j*ns.z);
	vec4 y_=floor(j-7.*x_);
	
	vec4 x=x_*ns.x+ns.yyyy;
	vec4 y=y_*ns.x+ns.yyyy;
	vec4 h=1.-abs(x)-abs(y);
	
	vec4 b0=vec4(x.xy,y.xy);
	vec4 b1=vec4(x.zw,y.zw);
	
	vec4 s0=floor(b0)*2.+1.;
	vec4 s1=floor(b1)*2.+1.;
	vec4 sh=-step(h,vec4(0.));
	
	vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
	vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
	
	vec3 p0=vec3(a0.xy,h.x);
	vec3 p1=vec3(a0.zw,h.y);
	vec3 p2=vec3(a1.xy,h.z);
	vec3 p3=vec3(a1.zw,h.w);
	
	
	vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
	p0*=norm.x;
	p1*=norm.y;
	p2*=norm.z;
	p3*=norm.w;
	
	
	vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
	m=m*m;
	return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
}

vec3 hsv2rgb(vec3 c){
	vec4 K=vec4(1.,2./3.,1./3.,3.);
	vec3 p=abs(fract(c.xxx+K.xyz)*6.-K.www);
	return c.z*mix(K.xxx,clamp(p-K.xxx,0.,1.),c.y);
}

float circle_s(vec2 dist,float radius){
	return smoothstep(0.,radius,pow(dot(dist,dist),.6)*.1);
}

void main(){
	vec2 aspect=vec2(u_resolution.x/u_resolution.y,1.);
	
	vec2 uv=vUv*aspect;

	vec2 mouse=vUv-u_point;
	mouse.y/=u_ratio;
	float mouseInfluence = smoothstep(0.0, 0.5, length(mouse));

	float distanceFromCenter=length(vUv-vec2(.5,.5));
	float mask=1.-smoothstep(.1,.7,distanceFromCenter);
	
	float noise=snoise(vec3(uv,u_time * 3.));
	
	float noise1=snoise(vec3(uv+.1,u_time * 3.));
	float noise2=snoise(vec3(uv-.1,u_time * 3.));
	
	float alpha=(noise+noise1+noise2)/3.;
	alpha*=circle_s(mouse,.015 * u_mouseInteraction);
	float x=1.-noise;
	
	
	
	vec3 col=vec3(u_color1.x/255.,u_color1.y/255.,u_color1.z/255.);
	vec3 newColor=vec3(u_color2.x/255.,u_color2.y/255.,u_color2.z/255.);
	
	
	float blendFactor=smoothstep(.1,1.,x * 1.);
	vec3 blendedColor=mix(newColor, col, blendFactor);

	
	gl_FragColor.rgb=blendedColor;
	
	
	
	gl_FragColor.a=alpha;
}`,
  vertex: `
  varying vec2 vUv;
	void main() {
			vUv = uv;
			gl_Position = vec4(position, 1.);
	}
`,
};

// 设置容器和尺寸
const container = document.body;
let width = container.offsetWidth;
let height = container.offsetHeight;

// 设置当前时间和时间增量
let currentTime = 0;
let timeAddition = Math.random() * 1000;

// 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(
  width / -2,
  width / 2,
  height / 2,
  height / -2,
  0,
  100
);

// 创建渲染器并设置背景透明
const renderer = new THREE.WebGLRenderer({ alpha: true });
const startTime = new Date().getTime();

// 设置渲染器尺寸并添加到容器中
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

// 设置着色器变量
let uniforms = {
  uTime: {
    value: 0,
  },
  u_point: {
    type: "v2",
    value: {
      x: 0.5,
      y: 0.5,
    },
  },
  u_resolution: {
    type: "v2",
    value: {
      x: 2560,
      y: 1293,
    },
  },
  u_time: {
    type: "f",
    value: 0,
  },
  u_alpha: {
    type: "f",
    value: 0.9,
  },
  u_ratio: {
    type: "f",
    value: 1.979891724671307,
  },
  u_width: {
    type: "f",
    value: 2560,
  },
  u_mouseInteraction: {
    type: "f",
    value: 1,
  },
  u_strength: {
    type: "f",
    value: 0.5,
  },
  u_coloring: {
    type: "f",
  },
  u_saturation: {
    type: "f",
  },
  u_brightness: {
    type: "f",
  },
  u_color1: {
    type: "v3",
    value: {
      x: 225,
      y: 98,
      z: 0,
    },
  },
  u_color2: {
    type: "v3",
    value: {
      x: 185,
      y: 27,
      z: 76,
    },
  },
  u_speed: {
    type: "f",
    value: 0.1,
  },
};

// 创建着色器材质
let shaderMaterial = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: shaders.vertex,
  fragmentShader: shaders.fragment,
  transparent: true,
  dithering: true,

  depthTest: false,
});

// 创建平面几何和网格
let geometry = new THREE.PlaneGeometry(width, height, 32);
let plane = new THREE.Mesh(geometry, shaderMaterial);
scene.add(plane);
plane.position.z = 0.5;

// 设置相机位置
camera.position.y = 0;
camera.position.x = 0;
camera.position.z = 100;

// 渲染函数
function render() {
  var now = new Date().getTime();
  currentTime = (now - startTime) / 1000;
  uniforms.u_time.value = currentTime + timeAddition;
  // console.log('%c [ currentTime + timeAddition ]-312', 'font-size:13px; background:pink; color:#bf2c9f;', currentTime + timeAddition)

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

// 开始渲染
render();